<template>
    <el-dialog :title='title' width="600px" class="addProblem" :visible.sync="isDial">
        <el-table :data="gridData" border size='mini'>
            <el-table-column property="name" label="问题项">
                <template slot-scope="scope">
                    <el-input type="text" size="small" :maxlength='20' class="leftBorder" v-model="scope.row.name">删除</el-input>
                </template>
            </el-table-column>
            <el-table-column property="seriousness" label="是否严重" width="180">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.seriousness" size='mini' class="leftBorder">
                        <el-option label="严重" value="1"></el-option>
                        <el-option label="一般" value="0"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column property="operation" width='50' label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="delProlem(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="text" size="small" @click="addProlem">添加项目</el-button>
        <div slot="footer" class="dialog-footer">
            <el-button size='mini' type="primary" @click="seveProblem">保 存</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return{
            gridData: [],
            isDial: false,
            title:'添加/编辑问题',
            sub:''
        }
    },
    created(){
        let that=this
        this.$root.$on('addProblem',(type,sub)=>{
            this.isDial=true
            this.sub=sub
            let url1='problemType'
            let sId={
                sonId:sub.id,
            }
            request.ajaxGet({ //查询所有子类下面的  问题
                url:url1,
                that,
                params:sId,
                fn(res){
                    for(let i in res){
                        res[i].seriousness=''+res[i].seriousness
                    }
                    that.gridData=res
                }
            })
        })
    },
    methods:{
        delProlem(row){ //删除项目
            let gridData=this.gridData
            for(let i in gridData){
                if(gridData[i].id==row.id && gridData[i].seriousness==row.seriousness && gridData[i].name==row.name){
                    gridData.splice(i, 1);
                }
            }
        },
        seveProblem(){ //保存项目
            let gridData=this.gridData
            for(let i in gridData){
                if(gridData[i].seriousness=='' || gridData[i].name==''){
                    this.$message({message: "问题项和问题严重性不能为空",type: "warning"});
                    return
                }
            }
            let that=this
            let url ='problemType'
            let params={
                parentId:that.sub.id,
                list:gridData
            }
            request.ajaxPost({
                url,
                that,
                type:'PUT',
                params,
                fn(res) {
                    that.isDial = false;
                    that.$root.$emit('saveSub','on')
                }
            });
        },
        addProlem(){ //添加项目
            let that=this
            let obj={
                name: '',
                seriousness: '0',
                parentId:that.sub.id,
                id:0
            }
            let gridData=this.gridData
            gridData.push(obj)
        }
    }
}
</script>
<style lang="less" scoped>
.addProblem{
    text-align: left;
}
</style>
